<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/rear-end/index' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card >
    <el-row>
        <el-col >
            <el-button type="primary" @click="showAddCateDialog" >添加分类</el-button>
        </el-col>
      </el-row>
        <!-- 表格 -->
<tree-table :data="catelist" :columns="columns" :selection-type='false' :expand-type="false" show-index>
<template slot="order" slot-scope="scope">
  <el-tag size="mini" v-if="scope.row.catLevel===1">一级</el-tag>
  <el-tag type="success" size="mini" v-if="scope.row.catLevel===2">二级</el-tag>
</template>
<template slot="opt" slot-scope="scope"> 
  <el-button type="primary" @click="showUpdateCateDialog(scope.row)" icon="el-icon-edit" size="mini"></el-button>
        <el-button type="danger" @click="showdelCateDialog(scope.row)" icon="el-icon-delete" size="mini"></el-button>
</template>
</tree-table>
        <!-- 分页 -->
  <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="querInfo.pagenum"
:page-sizes="[ 2, 5, 10,20]"
:page-size="querInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
<!-- 添加分类对话框 -->
<el-dialog
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="50%"
  >
  <!-- 添加分类的表单 -->
  <el-form :model="addCateForm" :rules="CateFormRules" ref="addCateFormRef" label-width="100px">
  <el-form-item label="分类名称：" prop="catName">
    <el-input v-model="addCateForm.catName"></el-input>
  </el-form-item>
  <el-form-item label="父类分类：">
    <el-dropdown placement="bottom-start" @command="parentCateChange">
  <span class="el-dropdown-link">
    {{cascaderProps}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown" style="width: 35%;" >
    <el-dropdown-item v-for="(parentCate,index) in parentCateList" :key="parentCate.catId" :command="index">{{parentCate.catName}}</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown >
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="修改分类"
  :visible.sync="updateCateDialogVisible"
  width="50%"
  >
  <el-form :model="updateCateForm" :rules="CateFormRules" ref="updateCateFormRef" label-width="100px">
  <el-form-item label="分类名称：" prop="catName">
    <el-input v-model="updateCateForm.catName"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="updateCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="删除分类"
  :visible.sync="delCateDialogVisible"
  width="50%"
>
  <span>确定删除该分类吗？</span>
  <span slot="footer">
    <el-button @click="delCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="del">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
data(){
    return{
        //查询条件
        querInfo:{
         type:2,
         pagenum:1,
         pagesize:5
        },
        total:'',
        // 商品分类列表
        catelist:[],
        //为table指定列的定义
        columns:[{
            label:'分类名称',
            prop:'catName'
            },{
              label:'排序',
              //表示，当前列定义为模板列
              type:'template',
              //表示当前这一列使用模板名称
              template:'order'
            },
            {
              label:'操作',
              //表示，当前列定义为模板列
              type:'template',
              //表示当前这一列使用模板名称
              template:'opt'
            }
        ],
        // 控制添加分类对话框显示与隐藏
        addCateDialogVisible:false,
        updateCateDialogVisible:false,
        delCateDialogVisible:false,
        delCatId:'',
        //添加分类的表单数据
        addCateForm:{
          catName:'',
          catPid:null,
          catLevel:1
        },
        updateCateForm:{
          catName:'',
          catPid:null,
          catId:'',
          catLevel:1
        },
        //添加分类的表单验证规则
        CateFormRules:{
          catName:[
           {required:true,message:'请输入分类名称',trigger:'blur'} 
          ]
        },
       
        //父级分类列表数据
        parentCateList:[],
        // 指定级联选择器配置对象
        cascaderProps:"请选择",
        // 选中的父级分类系统
        selectedKey:''


    }
},
created(){
  this.getCateList()
},
methods:{
  async  getCateList(){
      const res= await this.$api.rear_end.categories(this.querInfo)
      if(res.data.code===1){
        this.catelist=res.data.data
        this.total=res.data.map.total
        
      }else{
        this.$message.error(res.data.msg)
      }
    },
    handleSizeChange(val) {
        this.querInfo.pagesize=val
const maxnum=Math.ceil(this.total/val)
    if(this.querInfo.pagenum>maxnum){
      this.querInfo.pagenum=maxnum
    }    
        this.getCateList()
      },
      handleCurrentChange(val) {
        this.querInfo.pagenum=val
        this.getCateList()
      },
      // 控制添加分类对话框显示与隐藏方法
      showAddCateDialog(){
        this.cascaderProps='请选择'
        this.addCateForm.catName=''
        this.addCateForm.catPid=null
        this.addCateForm.catLevel=1
        this.getParentCateList()
       this.addCateDialogVisible=true
      },
      //获取父级分类数据列表
   async  getParentCateList(){
      const q={
        type:1,
         pagenum:this.querInfo.pagenum,
         pagesize:this.querInfo.pagesize
      }
        const res= await this.$api.rear_end.categories(q)
        this.parentCateList=res.data.data
        console.log("parentCateList"+this.parentCateList)
      },
      //选择项发生变化触发函数
      parentCateChange(index){
        this.cascaderProps=this.parentCateList[index].catName
        this.addCateForm.catPid=this.parentCateList[index].catId
        this.addCateForm.catLevel=2
      },
      //添加分类
      addCate(){
       this.$refs.addCateFormRef.validate(async valid=>{
        if(!valid)return
       const res=await this.$api.rear_end.addCate(this.addCateForm)
      if(res.data.code==1){
        this.$message.success(res.data.data)
        this.getCateList()
        this.addCateDialogVisible=false
      }
      else{
        this.$message.error(res.data.msg)
      }
      })
      
      },
      //修改分类
      showUpdateCateDialog(row){
        
        this.updateCateForm.catLevel=row.catLevel
        this.updateCateForm.catName=row.catName
        this.updateCateForm.catId=row.catId
        this.updateCateForm.catPid=row.catPid
        this.updateCateDialogVisible=true
      },
      update(){
       this.$refs.updateCateFormRef.validate(async valid=>{
        if(!valid)return
       const res=await this.$api.rear_end.updateCate(this.updateCateForm)
      if(res.data.code==1){
        this.$message.success(res.data.data)
        this.getCateList()
        this.updateCateDialogVisible=false
      }
      else{
        this.$message.error(res.data.msg)
      }
      })
      
      },
      // 删除分类
      showdelCateDialog(row){
      this.delCatId = row.catId
      this.delCateDialogVisible=true
      },
    async del(){
        const res=await this.$api.rear_end.delCate({catId:this.delCatId})
      if(res.data.code==1){
        this.$message.success(res.data.data)
        if(this.total<this.querInfo.pagesize*this.querInfo.pagenum&&this.querInfo.pagenum>1){
           this.querInfo.pagenum=this.querInfo.pagenum-1
          } 
        this.getCateList()
        this.delCateDialogVisible=false
      }
      else{
        this.$message.error(res.data.msg)
      }
      }
}
}
</script>

<style scoped lang="less">
.el-row{
  margin-bottom: 20px;
}
.el-dropdown{
 border: 1px solid #c0c4cc;
 width: 100%;
 >.el-dropdown-link{
  width: 200%;
  margin-left: 20px;
 }
 >.el-dropdown-link i{
 position: absolute;
top: 25%;
right: 0;
font-size: 20px;
padding-left: 100%;
 }

}

</style>